<template>
  <view class="cart">
    <topbar title="购物车" />
    <view class="select">
      <button class="select-btn">
        全部({{ selectCount }})
        <uni-icons type="arrowdown" size="15" class="icon" />
      </button>
    </view>
    <view class="container">
      <view class="box" v-for="item in listData">
        <view class="select-box">
          <uni-icons
            class="icon-l"
            :type="selected ? 'checkbox-filled' : 'circle'"
            :color="selected ? '#0071CF' : '#D9D9D9 '"
            size="20"
            @click="handleIcon()"
          />
          <navigator url="/pages/index/index" class="nav">
            <text>{{ item.shopName }}</text>
            <uni-icons
              type="right"
              color="#AAAAAA "
              size="15"
              class="iscon-r"
            />
          </navigator>
        </view>
        <view class="box-info">
          <uni-icons
            class="icon-l"
            :type="selected ? 'checkbox-filled' : 'circle'"
            :color="selected ? '#0071CF' : '#D9D9D9'"
            size="20"
            @click="handleIcon()"
          />
          <image class="" :src="item.thumbnail" mode="aspectFill"></image>
          <view class="info-item">
            <uni-tooltip :content="item.spuSubTitle" placement="right">
              <view class="test">{{ item.spuSubTitle }}</view>
            </uni-tooltip>
            <view class="specifications"
              >{{ item.spec.key }}/{{ item.spec.value }}</view
            >
            <view class="footer">
              <view class="price">￥{{ item.purchasePrice }}</view>
              <view class="all-btn">
                <button
                  class="count-btn"
                  style="font-size: 40rpx"
                  @click="handleMinus"
                >
                  -
                </button>
                <text style="margin: 0 16rpx">{{ item.quantity }}</text>
                <button
                  class="count-btn"
                  style="font-size: 35rpx"
                  @click="handlePlus(item)"
                >
                  +
                </button>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import topbar from "@/component/topbar.vue";
import { UniIcons } from "@dcloudio/uni-ui/lib/uni-icons/uni-icons.vue";
import { UniTooltip } from "@dcloudio/uni-ui/lib/uni-tooltip/uni-tooltip.vue";
import { ref, computed } from "vue";
const selectCount = ref(0);
//默认没有选中
const selected = ref(false);
//取消或勾选圆框
const handleIcon = () => {
  selected.value = !selected.value;
};
//减法
const handleMinus = () => {
  if (count.value <= 0) return;
  count.value--;
};
const handlePlus = (item) => {
  uni.request({
    url: "https://qwscrm.com:8088/cart/v1/add",
    method: "POST",
    header: {
      Authorization: `Bearer ${token}`, // 把 token 放进去
    },
    data: {
      shopId:item.shopId,
      spuId: item.spuId,
      skuId: item.skuId,
      quantity: 1,
      id: item.id,
    },
    success:()=>{
        getList()
    },
  });

};
const listData = ref([]);
const token = uni.getStorageSync("token");
const getList =()=>{
uni.request({
  url: "https://qwscrm.com:8088/cart/v1/query-list",
  method: "POST",
  header: {
    Authorization: `Bearer ${token}`, // 把 token 放进去
  },
  data: {},
  success: (res) => {
    listData.value = res.data.data.list;
  },
})
}
getList()
</script>

<style lang="scss" scoped>
.cart {
  margin: 0 24rpx;
  .select {
    margin-top: 24rpx;
    .select-btn {
      width: 180rpx;
      height: 64rpx;
      border-radius: 40rpx 40rpx 40rpx 40rpx;
      background: #eef6ff;
      border: 2rpx solid #e4f2fd;
      font-size: 28rpx;
      color: #0071cf;
      display: flex;
      margin-left: 24rpx;
      align-items: center;
    }
    .icon {
      width: 22rpx;
      height: 32rpx;
      background: rgba(255, 255, 255, 0);
      padding-left: 10rpx;
      line-height: 32rpx;
      text-align: center;
    }
  }
  .container {
    margin-top: 24rpx;
    .box {
      width: 702rpx;
      height: 280rpx;
      background: #ffffff;
      border-radius: 8rpx;
      box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.15);
      margin-bottom: 16rpx;
      .select-box,
      .box-info {
        // 统一 icon-l 样式
        .icon-l {
          width: 32rpx;
          height: 32rpx;
          border: 2rpx dashed #d9d9d9; // 统一边框样式
          box-sizing: content-box;
          display: flex;
          justify-content: center;
          align-items: center;
          margin-left: 16rpx;
        }
      }
      .select-box {
        padding-top: 24rpx;
        display: flex;
        align-items: center;

        .nav {
          margin-left: 8rpx;
          display: flex;
          justify-content: center;
          align-items: center;
          text {
            width: 112rpx;
            height: 28rpx;
            font-family: "Source Han Sans CN, Source Han Sans CN";
            font-weight: 500;
            font-size: 28rpx;
            color: #333333;
            line-height: 28rpx;
            text-align: left;
            font-style: normal;
            text-transform: none;
            margin-left: 8rpx;
          }
          .iscon-r {
            width: 32rpx;
            height: 32rpx;
            background: rgba(255, 255, 255, 0);
            margin-left: 4rpx;
            line-height: 32rpx;
            text-align: center;
          }
        }
      }
      .box-info {
        display: flex;
        margin-top: 24rpx;
        align-items: center;
        image {
          width: 180rpx;
          height: 180rpx;
          padding-left: 18rpx;
        }
        .info-item {
          margin-left: 18rpx;
          .test {
            width: 362rpx;
            height: 24rpx;
            font-family: "Source Han Sans CN, Source Han Sans CN";
            font-weight: 500;
            font-size: 24rpx;
            color: #333333;
            line-height: 24rpx;
            text-align: left;
            font-style: normal;
            text-transform: none;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap; /* 强制不换行 */
          }
          .specifications {
            height: 24rpx;
            font-family: "Source Han Sans CN, Source Han Sans CN";
            font-weight: 500;
            font-size: 24rpx;
            color: #666666;
            line-height: 24rpx;
            text-align: justified;
            font-style: normal;
            text-transform: none;
            margin-top: 24rpx;
          }
          .footer {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: 42rpx;
            .price {
              height: 34rpx;
              font-weight: 400;
              font-size: 24rpx;
              color: #f62a20;
              line-height: 28rpx;
              text-align: left;
              margin-right: 186rpx;
            }
            .all-btn {
              display: flex;
              .count-btn {
                width: 40rpx;
                height: 40rpx;
                border-radius: 4rpx 4rpx 4rpx 4rpx;
                display: flex;
                justify-content: center;
                align-items: center;
                background: #fff;
                color: #666666;
              }
            }
          }
        }
      }
    }
  }
}
</style>
